<template>
    <div>
        <page-main>
            <!-- 筛选栏 -->
            <search-bar>
                <el-form :model="search" size="small" label-width="100px">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="创建时间">
                                <el-date-picker
                                    v-model="search.date"
                                    type="daterange"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    @change="handleDateChange"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <el-button type="primary" @click="getList">查询</el-button>
                                <el-button @click="handleReset">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </search-bar>
        </page-main>
        <page-main>
            <!-- 表格 table -->
            <el-table ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row>
                <el-table-column prop="date" fixed label="日期" width="180" />
                <el-table-column prop="name" fixed label="账户名称" width="180" />
                <el-table-column prop="impression" label="展示次数" />
                <el-table-column prop="click" label="点击次数" />
                <el-table-column prop="ctr" label="点击率" />
                <el-table-column prop="cpc" label="平均点击价格" width="120" />
                <el-table-column prop="cost" label="消费" />
                <el-table-column prop="success" label="表单提交次数" width="120" />
                <el-table-column prop="success_rate" label="表单提交率" width="100" />
                <el-table-column prop="xinxi_money" label="信息流账户余额" width="140" />
                <el-table-column prop="search_money" label="搜索账户金额" width="140" />
                <el-table-column prop="liu" label="用户完成留线索行为的次数" width="200" />
                <el-table-column prop="liu_cost" label="用户完成留线索行为的消费" width="200" />
            </el-table>
            <!-- 分页 -->
            <div style="margin-top: 20px; text-align: right;">
                <el-pagination
                    :current-page="search.pages"
                    :page-size="search.limit"
                    :total="search.total"
                    :page-sizes="[10, 20, 50, 100]"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </page-main>
    </div>
</template>

<script>
import { accountInfo } from '@/api/clue'
export default {
    name: 'AccountInfo',
    data() {
        return {
            loading: false,
            search: {
                start: '',
                end: ''
            },
            dataList: []
        }
    },
    mounted() {
        this.getList();
    },
    methods: {
        // 切换分页size
        handleSizeChange(val) {
            this.search.limit = val;
            this.getList();
        },
        // 切换页数
        handleCurrentChange(val) {
            this.search.pages = val;
            this.getList();
        },
        // 重置筛选条件
        handleReset() {
            this.search.start = '';
            this.search.end = '';
            this.getList();
        },
        // 获取列表
        getList() {
            this.loading = true;
            accountInfo(this.search).then(res => {
                if (res.status == 1) {
                    this.dataList = res.data.list || [];
                    this.search.total = Number(res.data.count);
                    this.order_price = res.data.order_price;
                    this.count = res.data.count;
                    this.order_no_collection = res.data.order_no_collection;
                    this.order_collection = res.data.order_collection;
                }
                this.loading = false;
            })
        },
        handleDateChange(e) {
            this.search.start = e ? e[0] : ''
            this.search.end = e ? e[1] : ''
        }
    }
}
</script>
